<template>
	<div class="reportbox">
		<div class="headbox">
			<div class="titlebox">
				<div class="titlebox-title">
					{{ disabled?$t('menu.brandMonDetailSum'):$t('menu.brandMonDetail') }}
				</div>
				<div class="titlebox-btn">
					<el-button icon="el-icon-download" type="warning" @click="exportPDF" :loading="showExport">Download</el-button>
					<!-- <el-button @click="printPDF" :loading="showExport">{{ $t('table_data.print') }}</el-button> -->
				</div>
			</div>
			<div class="timebox">
				<div class="timebox-date">
					<div class="timebox-date-data">
						{{ `${$t('report_data.rdate')}: ${sendParams.createDate}` }}
					</div>
					<div>
						{{ `${$t('report_data.gdate')}: ${sendParams.reportDate}` }}
					</div>
				</div>
				<div class="timebox-number" v-if="responseData">
					{{ `${$t('report_data.number')}: ${responseData.reportCode}` }}
				</div>
			</div>
		</div>
		<div class="tablebox" id="tableDombox" v-if="disabled">
			<!-- :span-method="arraySpanMethod" :summary-method="getSummaries" show-summary :sum-text="$t('report_data.subtotal')" @header-click="headerClick"-->
			<el-table ref="table" :data="tableData" border width="100%" :cell-style="handleChangeCellStyle" :header-cell-style="setHeadCellStyle" :height="detailHeight-240" :span-method="arraySpanMethod" :row-class-name="rowClass">
				<el-table-column :label="$t('report_data.itemName')" width="auto">
					<template #default="scope">
						<div v-if="scope.row.notCalc">{{ scope.row.itemName }}</div>
						<span v-else>{{ setName(scope.row) }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('report_data.totalItemSales')" width="auto">
					<template #default="scope">
						<span>{{ setNum(scope.row.totalItemSales) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="itemSalesPrice" width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.priceRule')" placement="bottom">
							<div>
								{{ $t('report_data.itemSalesPrice') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
					<template #default="scope">
						<span>{{ setNum(scope.row.itemSalesPrice) }}</span>
					</template>
				</el-table-column>
				<el-table-column width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.commissionRule')" placement="bottom">
							<div>
								{{ $t('report_data.itemSalesCommissions') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
					<template #default="scope">
						<span>{{ setNum(scope.row.itemSalesCommissions) }}</span>
					</template>
				</el-table-column>
				<el-table-column width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.feeRule')" placement="bottom">
							<div>
								{{ $t('report_data.gomFee') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
					<template #default="scope">
						<span>{{ setNum(scope.row.gmoFee) }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="reportSumbox">
				<el-table ref="table" :data="tableTotalData" border width="100%" :cell-style="totalHandleChangeCellStyle" :header-cell-style="setHeadCellStyle" height="auto">
					<el-table-column :label="$t('report_data.monthlyTotal')" width="auto">
						<template #default="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.content" placement="top">
								<div>
									{{ scope.row.title }}
									<el-icon><component :is="icon" /></el-icon>
								</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column :label="$t('report_data.allAmount')" prop="grandTotal" width="auto"></el-table-column>
				</el-table>
			</div>
		</div>
		<!-- detail -->
		<div class="tablebox" id="tableDombox" v-else>
			<el-table ref="table" :data="tableDetailData" border width="100%" :cell-style="detailHandleChangeCellStyle" :header-cell-style="setHeadCellStyle" :height="detailHeight" :span-method="detailSpanMethod" :row-class-name="rowClass">
				<el-table-column :label="$t('order_data.sellCinema')" prop="saleCinema" width="auto"></el-table-column>
				<el-table-column :label="$t('report_data.itemName')" prop="totalItemSales" width="auto">
					<template #default="scope">
						<div v-if="scope.row.notCalc">{{ scope.row.itemName }}</div>
						<span v-else>{{ setName(scope.row) }}</span>
					</template>
				</el-table-column>
				<el-table-column width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.priceDetailRule')" placement="bottom">
							<div>
								{{ $t('report_data.itemSalesAmount') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
					<template #default="scope">
						<span>{{ setNum(scope.row.itemSalesAmount) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="salesVolume" width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.volumeDetailRule')" placement="bottom">
							<div>
								{{ $t('report_data.salesVolume') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column width="auto">
					<template v-slot:header>
						<el-tooltip class="item" effect="dark" :content="$t('report_data.commissionDetailRule')" placement="bottom">
							<div>
								{{ $t('report_data.itemSalesCommissions') }}
								<el-icon><component :is="icon" /></el-icon>
							</div>
						</el-tooltip>
					</template>
					<template #default="scope">
						<span>{{ setNum(scope.row.itemSalesCommission) }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="exportBox" ref="printMain">
			<!-- 以下export导出dom使用 -->
			<div class="tablebox" id="tablebox" v-if="disabled">
				<div class="export-title">{{ $t('export_data.sumTitle') }}</div>
				<div class="reportHeadBox">
					<div class="titlebox">
						<img class="titlebox-logo" src="report/logo.png">
						<div class="titlebox-right">
							<div>{{ $t('export_data.companyName') }}</div>
							<div>{{ $t('export_data.companyCode') }}</div>
							<div>{{ $t('export_data.companyAddress') }}</div>
							<div>{{ $t('export_data.companyTel') }}</div>
						</div>
					</div>
					<div class="contbox">
						<div class="contboxtop">
							<div>
								<label>{{ $t('export_data.name') }}</label>
								<div class="reportValue">{{ brandInfo.name }}</div>
							</div>
							<div>
								<label>{{ $t('export_data.number') }}</label>
								<div class="reportValue">{{ responseData.reportCode }}</div>
							</div>
							<div>
								<label>{{ $t('export_data.address') }}</label>
								<div class="reportValue">{{ brandInfo.officialAddress }}</div>
							</div>
							<div>
								<label>{{ $t('export_data.createDate') }}</label>
								<div class="reportValue">{{ sendParams.createDate }}</div>
							</div>
							<div>
								<label>{{ $t('export_data.tel') }}</label>
								<div class="reportValue">{{ brandInfo.phoneCode+'-'+brandInfo.phoneNo }}</div>
							</div>
						</div>
						<div class="contboxdate">
							<div>
								<label>{{ $t('export_data.reportDate') }}</label>
								<div class="reportValue">{{ sendParams.reportDate }}</div>
							</div>
							<div>
								<label>{{ $t('export_data.sum') }}</label>
								<div class="reportValue">{{ setNum(responseData.grandTotalTax) }}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- :span-method="arraySpanMethod" :summary-method="getSummaries" show-summary :sum-text="$t('report_data.subtotal')" @header-click="headerClick"-->
				<el-table ref="table" :data="tableData" border width="100%" :cell-style="exportHandleChangeCellStyle" :header-cell-style="exportSetHeadCellStyle" :span-method="arraySpanMethod">
					<el-table-column :label="$t('report_data.itemName')" width="auto">
						<template #default="scope">
							<div v-if="scope.row.notCalc">{{ scope.row.itemName }}</div>
							<span v-else>{{ setName(scope.row) }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="$t('report_data.totalItemSales')" prop="totalItemSales" width="auto"></el-table-column>
					<el-table-column :label="$t('report_data.itemSalesPrice')" prop="itemSalesPrice" width="auto"></el-table-column>
					<el-table-column :label="$t('report_data.itemSalesCommissions')" prop="itemSalesCommissions" width="auto"></el-table-column>
					<el-table-column :label="$t('report_data.gomFee')" prop="gmoFee" width="auto"></el-table-column>
				</el-table>
				<div class="reportSumbox" style="width: 55%">
					<el-table ref="table" :data="tableTotalData" border width="100%" :cell-style="exportTotalHandleChangeCellStyle" :header-cell-style="exportSetHeadCellStyle" height="auto">
						<el-table-column :label="$t('report_data.monthlyTotal')" width="auto">
							<template #default="scope">
								<div>
									{{ scope.row.title }}
								</div>
							</template>
						</el-table-column>
						<el-table-column :label="$t('report_data.allAmount')" prop="grandTotal" width="auto"></el-table-column>
					</el-table>
				</div>
			</div>
			<!-- detail -->
			<div class="tablebox" id="tablebox" v-else>
				<div class="export-title">{{ $t('export_data.detailTitle') }}</div>
				<div class="reportHeadBox exportDetailBox">
					<div class="titlebox">
						<img class="titlebox-logo" src="report/logo.png">
						<div class="titlebox-right">
							<div>{{ $t('export_data.companyName') }}</div>
							<div>{{ $t('export_data.companyCode') }}</div>
							<div>{{ $t('export_data.companyAddress') }}</div>
							<div>{{ $t('export_data.companyTel') }}</div>
						</div>
						<div class="numbox">
							<label>{{ $t('export_data.number') }}</label>
							<div class="reportValue">{{ responseData.reportCode }}</div>
						</div>
					</div>
				</div>
				<el-table ref="table" :data="tableDetailData" border width="100%" :cell-style="exportDetailHandleChangeCellStyle" :header-cell-style="exportSetHeadCellStyle" :span-method="detailSpanMethod">
					<el-table-column :label="$t('order_data.sellCinema')" prop="saleCinema" width="auto"></el-table-column>
					<el-table-column :label="$t('report_data.itemName')" prop="totalItemSales" width="auto">
						<template #default="scope">
							<div v-if="scope.row.notCalc">{{ scope.row.itemName }}</div>
							<span v-else>{{ setName(scope.row) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="itemSalesAmount" width="auto">
						<template v-slot:header>
							<div>
								{{ $t('report_data.itemSalesAmount') }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="salesVolume" width="auto">
						<template v-slot:header>
							<div>
								{{ $t('report_data.salesVolume') }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="itemSalesCommission" width="auto">
						<template v-slot:header>
							<div>
								{{ $t('report_data.itemSalesCommissions') }}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import  { report } from '@/mixin/report'
import sCDialog from "@/components/scDialog"
import html2canvas from "html2canvas"
import jsPDF from 'jspdf'
import print from '@/utils/print'

	export default {
		emits: ['success', 'closed'],
		components: {
			sCDialog,
			html2canvas,
			jsPDF
		},
		mixins: [report],
		data() {
			return {
				icon: 'el-icon-question-filled',
				brandInfo: {}
			}
		},
		watch: {
			
		},
		computed: {
			setName(){
				return function(item){
					return item.itemName[this.$i18n.locale]
				}
			},
			setNum(){
				return (e)=>{
					if(typeof(e)=='number')return this.$TOOL.groupSeparator(e)
				}
			}
		},
		mounted(){
			this.detailHeight = window.innerHeight - 100
			this.disabled = this.$route.query.type=='sum'?true:false;
			this.sendParams.reportDate = this.$route.query.date||'2024-03'
			this.sendParams.createDate = this.$route.query.rdate||'2024-03'
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.brandMonDetailSum'):this.$t('menu.brandMonDetail'))
			if(this.disabled){this.getInfo();this.getBrandInfo();return}
			this.getDetailData()
		},
		methods: {
			async getBrandInfo(){
				const res = await this.$API.brand_account.brandDetail.get();
				this.brandInfo = res.data;
			},
			printPDF(){
				// this.showExport = true;
				this.$nextTick(()=>{
					print(this.$refs.printMain)
				})
			},
			exportPDF(){
				this.showExport = true;
				// let tableObj = document.getElementById('tableDombox');
				this.$nextTick(()=>{
					html2canvas(document.querySelector('#tablebox'), {
						allowTaint: false,
						taintTest: false,
						logging: false,
						useCORS: true,
						dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
						scale: 4 // 按比例增加分辨率
					}).then(canvas => {
						let contentWidth = canvas.width;
						let contentHeight = canvas.height;
						// eslint-disable-next-line new-cap
						// var PDF = new jsPDF('l', 'mm', 'a4') // A3纸，横向
						var PDF = new jsPDF('p', 'mm', 'a4') // A4纸，纵向
						var ctx = canvas.getContext('2d')
						var a4w = 190; var a4h = 277 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
						// var a4w = 259; var a4h = 400 // A3大小，279mm x 420mm，四边各保留10mm的边距，显示区域259x400
						var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度[这个计算方式应该是纵向]
						// var imgHeight = Math.floor(a4w * canvas.width / a4h) // 按A4显示比例换算一页图像的像素高度[这个是横向打印的计算方法]
						var renderedHeight = 0

							while (renderedHeight < contentHeight) {
								var page = document.createElement('canvas')
								page.width = contentWidth
								page.height = Math.min(imgHeight, contentHeight - renderedHeight)// 可能内容不足一页

								// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
								page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, contentWidth, Math.min(imgHeight, contentHeight - renderedHeight)), 0, 0)
								PDF.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 5, 5, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距[a3使用1.414换算比例]

								renderedHeight += imgHeight
								if (renderedHeight < contentHeight) {
									PDF.addPage()// 如果后面还有内容，添加一个空页
								}
								// delete page;
							}

							PDF.save(this.sendParams.reportDate+(this.disabled?this.brandInfo.name:'')+(this.disabled?this.$t('export_data.sumTitle'):this.$t('export_data.detailTitle')))
							this.showExport = false;
					})
					.catch((e)=>{
							console.log(e)
					})
				})
				
			},
			// 获取屏幕dpi
			js_getDPI() {
				var arrDPI = new Array();
				if (window.screen.deviceXDPI != undefined) {
						arrDPI[0] = window.screen.deviceXDPI;
						arrDPI[1] = window.screen.deviceYDPI;
				}
				else {
						var tmpNode = document.createElement("DIV");
						tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
						document.body.appendChild(tmpNode);
						arrDPI[0] = parseInt(tmpNode.offsetWidth);
						arrDPI[1] = parseInt(tmpNode.offsetHeight);
						tmpNode.parentNode.removeChild(tmpNode);   
				}
				return arrDPI;
			},
			dataURLToBlob(dataurl) {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], { type: mime });
			},
			async getDetailData(){
				this.showExport = true;
				let res = await this.$API.brand_report.getReportDetail.get(this.sendParams);
				if(res.code == 'OK'){
					this.tableDetailData = res.data.content
					this.getSubtotal()
				}
			},
			async getInfo(){
				this.showExport = true;
				let res = await this.$API.brand_report.getReportSummary.get(this.sendParams);
				if(res.code == 'OK'){
					this.tableData = res.data.content
					this.getSubtotal()
				}
			},
			async getSubtotal(){
				let res = await this.$API.brand_report.getReportSummarySum.get(this.sendParams);
				if(res.code == 'OK'){
					this.showExport = false;
					this.responseData = res.data;
					if(this.disabled){
						this.tableData.push({
							notCalc: true,
							itemName: this.$t('report_data.subtotal'),
							totalItemSales: '',
							itemSalesPrice: '',
							itemSalesCommissions: res.data.subtotalItemSalesCommissions,
							gmoFee: res.data.subtotalGmoFee
						},{
							notCalc: true,
							itemName: this.$t('report_data.salesTaxAmount'),
							totalItemSales: '',
							itemSalesPrice: '',
							itemSalesCommissions: res.data.salesTaxItemSalesCommissions,
							gmoFee: res.data.saleTaxGmoFee
						})
						this.tableTotalData.push({
							grandTotal: this.$TOOL.groupSeparator(res.data.grandTotal),
							title: this.$t('report_data.grandTotal'),
							content: this.$t('report_data.totalRule')
						},{
							grandTotal: this.$TOOL.groupSeparator(res.data.salesTaxAmount),
							title: this.$t('report_data.salesTaxAmount'),
							content: this.$t('report_data.amountRule')
						},{
							grandTotal: this.$TOOL.groupSeparator(res.data.grandTotalTax),
							title: this.$t('report_data.grandTotalTax'),
							content: this.$t('report_data.taxRule')
						})
					}else{
						this.tableDetailData.push({
							notCalc: true,
							saleCinema: this.$t('report_data.grandTotal'),
							itemSalesCommission: res.data.grandTotalItemSalesCommissions,
						})
					}
				}
			},
			// detail合并列
			detailSpanMethod({rowIndex, columnIndex }) {
				if(rowIndex == this.tableDetailData.length-1){
					if(columnIndex == 0){
						return {
							rowspan: 1,
							colspan: 4
						}
					}else if(columnIndex == 1 || columnIndex == 2 || columnIndex == 3){
						return {
							rowspan: 0,
							colspan: 0
						}
					}
				}
			},
			exportDetailHandleChangeCellStyle({rowIndex, columnIndex}){
				if(rowIndex == this.tableDetailData.length-1){
					if(columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3){
						return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 700,padding: '10px 0', fontSize: '14px' }
					}else {
						return { textAlign: 'center', padding: '10px 0', fontSize: '14px' }
					}
				}else{
					return { textAlign: 'center', padding: '10px 0', fontSize: '14px' }
				}
			},
			// detail 单元格样式
			detailHandleChangeCellStyle({rowIndex, columnIndex}){
				if(rowIndex == this.tableDetailData.length-1){
					if(columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3){
						return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 700,padding: '14px 0', fontSize: '16px' }
					}else {
						return { textAlign: 'center', padding: '14px 0', fontSize: '16px' }
					}
				}else{
					return { textAlign: 'center', padding: '14px 0', fontSize: '16px' }
				}
			},
			// 行样式
			rowClass({rowIndex}){
				if(rowIndex == this.tableData.length-1 || rowIndex == this.tableDetailData.length-1){
					return 'fixed-row-bottom'
				}
				if(rowIndex == this.tableData.length-2 && this.disabled){
					return 'fixed-row-top'
				}
			},
			// 合并列
			arraySpanMethod({rowIndex, columnIndex }) {
				// console.log(11111111,row,column,rowIndex,columnIndex)
				if(rowIndex == this.tableData.length-1 || rowIndex == this.tableData.length-2){
					if(columnIndex == 0){
						return {
							rowspan: 1,
							colspan: 3
						}
					}else if(columnIndex == 1 || columnIndex == 2){
						return {
							rowspan: 0,
							colspan: 0
						}
					}
				}
      },
			exportHandleChangeCellStyle({rowIndex, columnIndex}){
				if(rowIndex == this.tableData.length-1 || rowIndex == this.tableData.length-2){
					if(columnIndex == 0 || columnIndex == 1 || columnIndex == 2){
						return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 400,padding: '10px 0', fontSize: '14px' }
					}else {
						return { textAlign: 'center', padding: '10px 0', fontSize: '14px' }
					}
				}else{
					return { textAlign: 'center', padding: '10px 0', fontSize: '14px' }
				}
			},
			// 列表单元格样式
			handleChangeCellStyle({rowIndex, columnIndex}){
				if(rowIndex == this.tableData.length-1 || rowIndex == this.tableData.length-2){
					if(columnIndex == 0 || columnIndex == 1 || columnIndex == 2){
						return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 700,padding: '14px 0', fontSize: '16px' }
					}else {
						return { textAlign: 'center', padding: '14px 0', fontSize: '16px' }
					}
				}else{
					return { textAlign: 'center', padding: '14px 0', fontSize: '16px' }
				}
			},
			exportTotalHandleChangeCellStyle({columnIndex}){
				if(columnIndex == 0){
					return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 400,padding: '14px 0', fontSize: '14px' }
				}else {
					return { textAlign: 'center', padding: '14px 0', fontSize: '14px' }
				}
			},
			// 汇总单元格样式
			totalHandleChangeCellStyle({columnIndex}){
				if(columnIndex == 0){
					return { textAlign: 'center', backgroundColor: '#FFF3D7', fontWeight: 700,padding: '14px 0', fontSize: '16px' }
				}else {
					return { textAlign: 'center', padding: '14px 0', fontSize: '16px' }
				}
			},
			getSummaries(param) {
				console.log(222222,param)
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index < 3) {
            sums[index] = this.$t('report_data.subtotal');
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            // sums[index] = 'N/A';
          }
        });

        return sums;
      },
			exportSetHeadCellStyle(){
				return { color: '#666666', backgroundColor: '#EAC97C', textAlign: 'center',padding: '10px 0', fontSize: '14px'}
			},
			setHeadCellStyle(){
				return { color: '#666666', backgroundColor: '#EAC97C', textAlign: 'center',padding: '14px 0', fontSize: '16px'}
			},
			renderHeadeThree(h, { column, $index }) {
				// h 是一个渲染函数       column 是一个对象表示当前列      $index 第几列
				console.log(33333333333,h,column,$index)
				return h("div", {
					attrs: {
						class: "cell" //ele原来样式
					},
					domProps: {
						innerHTML: '<span class="red">fffffffff </span>' + column.label
					}
				});
			},
			
		}
	}
</script>

<style scoped>
.reportbox {
	margin: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 20px;
	background: #fff;
}
.headbox {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}
.titlebox {
	display: flex;
	justify-content: space-between;
	font-size: 30px;
}
.timebox {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	margin-top: 20px;
	align-items: center;
}
.timebox-date {
	display: flex;
}
.timebox-date-data {
	margin-right: 20px;
}
.reportSumbox {
	margin-top: 30px;
	width: 40%;
}
:deep .fixed-row-bottom {
    display: table-row !important;
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    background: #fff !important;
    z-index: 3 !important;
}
:deep .fixed-row-top {
    display: table-row !important;
    position: sticky !important;
    bottom: 52px !important;
    width: 100% !important;
    background: #fff !important;
    z-index: 3 !important;
}
.exportBox {
	width: 210mm;
	/* height: 297mm; */
	/* width: 100%; */
	height: 0px;
	overflow: hidden;
}
.reportHeadBox {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.exportDetailBox {
	flex-direction: row;
	margin: 20px 0;
}
.reportHeadBox>.titlebox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.reportHeadBox>.titlebox>.titlebox-logo {
	width: 150px;
	margin: 0 20px;
}
.reportHeadBox>.titlebox>.titlebox-right {
	font-size: 15px;
	width: 74%;
}
.exportDetailBox>.titlebox>.titlebox-right {
	width: auto;
}
.reportHeadBox>.contbox {
	width: 100%;
  display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}
.reportHeadBox>.contbox>.contboxtop {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20px;
	margin-bottom: 50px;
}
.reportHeadBox>.contbox>.contboxdate {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.reportHeadBox>.contbox>.contboxdate>div {
	flex: 0 0 40%;
	display: flex;
	margin: 14px 15px;
	font-size: 15px;
}
.reportHeadBox>.contbox>.contboxtop>div {
	flex: 0 0 40%;
	display: flex;
	margin: 14px 15px;
	font-size: 15px;
}

.reportHeadBox>.contbox>.contboxtop>div>label,.reportHeadBox>.contbox>.contboxdate>div>label {
	width: 200px;
  text-align: right;
}
.reportValue {
	text-decoration: underline;
}
.numbox {
	display: flex;
	font-size: 15px;
}
.export-title {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
 }

@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
